<template>
  <a-card class="card" title="排班信息" :bordered="false">
    <a-table :columns="columns" :dataSource="data" rowKey="id" bordered>
      <a slot="name" slot-scope="text">{{ text }}</a>
      <template slot="monday" slot-scope="text,record">
        <a-tag :color="record.scheduling.monday | colorFilter">
          {{ record.scheduling.monday | stateFilter }}
        </a-tag>
      </template>
      <template slot="tuesday" slot-scope="text,record">
        <a-tag :color="record.scheduling.tuesday | colorFilter">
          {{ record.scheduling.tuesday | stateFilter }}
        </a-tag>
      </template>
      <template slot="wednesday" slot-scope="text,record">
        <a-tag :color="record.scheduling.wednesday | colorFilter">
          {{ record.scheduling.wednesday | stateFilter }}
        </a-tag>
      </template>
      <template slot="thursday" slot-scope="text,record">
        <a-tag :color="record.scheduling.thursday | colorFilter">
          {{ record.scheduling.thursday | stateFilter }}
        </a-tag>
      </template>
      <template slot="friday" slot-scope="text,record">
        <a-tag :color="record.scheduling.friday | colorFilter">
          {{ record.scheduling.friday | stateFilter }}
        </a-tag>
      </template>
      <template slot="saturday" slot-scope="text,record">
        <a-tag :color="record.scheduling.saturday | colorFilter">
          {{ record.scheduling.saturday | stateFilter }}
        </a-tag>
      </template>
      <template slot="sunday" slot-scope="text,record">
        <a-tag :color="record.scheduling.sunday | colorFilter">
          {{ record.scheduling.sunday | stateFilter }}
        </a-tag>
      </template>
    </a-table>
  </a-card>
</template>
<script>
import { getNurse } from '../../api/nurse'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    align: 'center',
    key: 'name'
  },
  {
    title: '周一',
    dataIndex: 'monday',
    key: 'monday',
    align: 'center',
    scopedSlots: { customRender: 'monday' }
  },
  {
    title: '周二',
    dataIndex: 'tuesday',
    key: 'tuesday',
    align: 'center',
    scopedSlots: { customRender: 'tuesday' }
  },
  {
    title: '周三',
    dataIndex: 'wednesday',
    key: 'wednesday',
    align: 'center',
    scopedSlots: { customRender: 'wednesday' }
  },
  {
    title: '周四',
    dataIndex: 'thursday',
    key: 'thursday',
    align: 'center',
    scopedSlots: { customRender: 'thursday' }
  },
  {
    title: '周五',
    dataIndex: 'friday',
    key: 'friday',
    align: 'center',
    scopedSlots: { customRender: 'friday' }
  },
  {
    title: '周六',
    dataIndex: 'saturday',
    key: 'saturday',
    align: 'center',
    scopedSlots: { customRender: 'saturday' }
  },
  {
    title: '周末',
    dataIndex: 'sunday',
    key: 'sunday',
    align: 'center',
    scopedSlots: { customRender: 'sunday' }
  }
]

export default {
  name: 'Scheduling',
  data () {
    return {
      data: null,
      columns,
      visible: false
    }
  },
  methods: {
    showModal () {
      this.visible = true
    },
    handleOk () {
      this.visible = false
    },
    onChange (date, dateString) {
      console.log(date, dateString)
    }
  },
  filters: {
    colorFilter (value) {
      switch (value) {
        case 1 : return 'orange'
        case 2 : return 'purple'
        case 3 : return 'blue'
        case 4 : return 'green'
        default: return 'gray'
      }
    },
    stateFilter (value) {
      switch (value) {
        case 1 : return '早班'
        case 2 : return '中班'
        case 3 : return '晚班'
        case 4 : return '休息日'
        default: return '未设置'
      }
    }
  },
  created () {
    getNurse().then(res => {
      console.log('res', res)
      this.data = res.result
    })
  }
}
</script>
